// ---------------------------------------------------
// Game Arrange Numbers With JavaScript
// Modification by. Devy Indriyani
// Input: JavaScript-jQuery
// Published On November 24, 2014
// Visit: http://sahabatblogger77.blogspot.com
//---------------------------------------------------- 
$(function(){
  Array.prototype.shuffle = function(){
    for (var i = 0; i < this.length; i++){
      var a = this[i];
      var b = Math.floor(Math.random() * this.length);
      this[i] = this[b];
      this[b] = a;
    } };
  var $el = {
    cell: $('.cell'),
    moves: $('.moves'),
    congrats: $('.congrats'),
    field: $('.game-field'),
    restart: $('.restart')
  };
  var numArr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
      movesQuant;
  
  var game = {
    init: function() {
      $el.cell.empty();
      $el.cell.removeClass('_empty');
      $el.field.removeClass('_hide');
      $el.congrats.addClass('_hide');
      numArr.shuffle();
      $el.cell.each(function(i, val){
        if(i !== 15) {
          $(this).append('<div class="tag" data-tag="' + numArr[i] + '">' + numArr[i] + '</div>');
        } else {
          $(this).addClass('_empty');
        }
      });
      movesQuant = 0;
      $el.moves.html(movesQuant);
    },
    
    setActiveTags: function() {
      $('.tag').removeClass('_active');
      var empty = +$('._empty').data('cell');  
      switch(empty) {
        case 1:
          $('.cell[data-cell="' + 2 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 5 +'"]').find('.tag').addClass('_active');
          break;
        case 2:
          $('.cell[data-cell="' + 1 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 3 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 6 +'"]').find('.tag').addClass('_active');
          break;
        case 3:
          $('.cell[data-cell="' + 2 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 4 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 7 +'"]').find('.tag').addClass('_active');
          break;
        case 4:
          $('.cell[data-cell="' + 3 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 8 +'"]').find('.tag').addClass('_active');
          break;
        case 5:
          $('.cell[data-cell="' + 1 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 6 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 9 +'"]').find('.tag').addClass('_active');
          break;
        case 6:
          $('.cell[data-cell="' + 2 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 5 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 7 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 10 +'"]').find('.tag').addClass('_active');
          break;
        case 7:
          $('.cell[data-cell="' + 3 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 6 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 8 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 11 +'"]').find('.tag').addClass('_active');
          break;
        case 8:
          $('.cell[data-cell="' + 4 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 7 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 12 +'"]').find('.tag').addClass('_active');
          break;
        case 9:
          $('.cell[data-cell="' + 5 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 10 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 13 +'"]').find('.tag').addClass('_active');
          break;
        case 10:
          $('.cell[data-cell="' + 6 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 9 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 11 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 14 +'"]').find('.tag').addClass('_active');
          break;
        case 11:
          $('.cell[data-cell="' + 7 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 10 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 12 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 15 +'"]').find('.tag').addClass('_active');
          break;
        case 12:
          $('.cell[data-cell="' + 8 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 11 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 16 +'"]').find('.tag').addClass('_active');
          break;
        case 13:
          $('.cell[data-cell="' + 9 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 14 +'"]').find('.tag').addClass('_active');
          break;
        case 14:
          $('.cell[data-cell="' + 10 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 13 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 15 +'"]').find('.tag').addClass('_active');
          break;
        case 15:
          $('.cell[data-cell="' + 11 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 14 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 16 +'"]').find('.tag').addClass('_active');
          break;
        case 16:
          $('.cell[data-cell="' + 12 +'"]').find('.tag').addClass('_active');
          $('.cell[data-cell="' + 15 +'"]').find('.tag').addClass('_active');
          break;
        default:
          console.log("Somethisng goes wrong");
      }
    },
      move: function(tag) {
      var empty = $('._empty');
      var cell = $(tag).closest('.cell');
      empty.append(tag).removeClass('_empty');
      cell.empty().addClass('_empty');
      movesQuant++;
      $el.moves.html(movesQuant);
    }
  };
  function startGame() {
    game.init();
    game.setActiveTags();
  }
  startGame();
  $el.cell.on('click', '._active', function(){
    var self = this;
    game.move(self);
    game.setActiveTags();
  });
  $el.restart.on('click', startGame);
});
document.write('<a title="Design By. SAHABAT BLOGGER 77" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:25px;right:14px;font:normal bold 11px Arial,Sans-Serif!important;color:#39f;" href="http://sahabatblogger77.blogspot.com" target="_blank">Sahabat Blogger 77</a>');